<template>
	<view :style="{height: pheight + 'px'}">
		<scroll-view scroll-y="true" class="scrollView bg-gray" @scroll="whenScroll">
			<!-- 表情包弹出层 -->
			<view v-show="mode==='Emoji'">
				<!-- 删除按钮 -->
				<button class="deleteEmojiClass" @tap="deleteEmoji"></button>
				<view :id="'emoji_'+index" class="img-icon bg-gray"
					:style="[6,7].includes(index%8)?(Math.floor(index/8)===aimRow?`opacity:${hsOpacity}`:Math.floor(index/8)> aimRow?'opacity:0':''):''"
					v-for="(item,index) in emoji.map" :key="index">
					<view style="width: 100%;height: 100%;background-size: cover;"
						:style="{ backgroundImage: 'url('+emoji.url + item.img+')' }" @tap="addEmoji(item)"></view>
				</view>
			</view>

			<!-- 图片，视频弹出层 -->
			<view v-show="mode==='Func'" class="padding" @tap="hideModal">
				<view class="functions">
					<view class="item" @tap="sendImage('album')">
						<view class="item-icon iconfont icon-tupian"></view>
						<view class="item-text">相册</view>
					</view>
					<view class="item" @tap="sendImage('camera')">
						<view class="item-icon iconfont icon-post_pic"></view>
						<view class="item-text">拍照</view>
					</view>
					<view class="item" @tap="sendVideo">
						<view class="item-icon iconfont icon-shipin"></view>
						<view class="item-text">视频</view>
					</view>
					<view class="item" @tap="sendCall('tel',1)">
						<view class="item-icon iconfont icon-tonghua"></view>
						<view class="item-text">语音通话</view>
					</view>
					<view class="item" @tap="sendCall('mov',2)">
						<view class="item-icon iconfont icon-ai-video"></view>
						<view class="item-text">视频通话</view>
					</view>
					<view class="item" @tap="sendFile">
						<view class="item-icon iconfont icon-wenjianjia"></view>
						<view class="item-text">文件</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import dataList from '@/static/json.js';
	import {
		bus
	} from '../../../../../main.js'
	export default {
		props: {
			mode: {
				type: String,
				default: ''
			},
			pheight: {
				type: Number,
				default: 192,
			},
			cIndex: {
				type: Number,
				default: -1,
			},
		},
		data() {
			return {
				hsOpacity: 0,
				//定义表情列表
				emoji: {
					url: '',
					map: []
				},
				emojiH: 0,
				aimRow: 0,
			}
		},
		watch: {
			mode(nVal, oVal) {
				if (nVal === 'Emoji') {
					this.emoji = dataList.emojiData
					this.$nextTick(function() {
						this.getEmojiHeight()
					})
				}
			},
		},
		created() {},
		methods: {
			getEmojiHeight() {
				const _this = this;
				const query = uni.createSelectorQuery().in(this);
				this.$nextTick(function() {
					query.select('#emoji_0').boundingClientRect(data => {
						_this.emojiH = data.height;
						let aimHeight = this.pheight - 50
						_this.aimRow = Math.ceil(aimHeight / (_this.emojiH + 15)) - 1
					}).exec();
				})
			},
			whenScroll(e) {
				let detail = e.detail
				// 预计需要隐藏的表情所在的行数
				let aimHeight = this.pheight + detail.scrollTop - 50
				let actEmojiH = this.emojiH + 15
				let mod = aimHeight % actEmojiH
				mod = mod === 0 ? actEmojiH : mod
				this.aimRow = Math.ceil(aimHeight / actEmojiH) - 1
				if (mod > Math.ceil(actEmojiH / 2)) {
					this.hsOpacity = ((mod * 2 / actEmojiH - 1)).toFixed(2)
				} else {
					this.hsOpacity = 0
				}
			},
			addEmoji(data) {
				bus.$emit('updateInput', {
					content: {
						name: data.name,
						img: this.emoji.url + data.img
					},
					mode: 'add'
				})
			},
			deleteEmoji() {
				// 虽说是删除表情,但是也删除字符
				bus.$emit('updateInput', {
					mode: 'del'
				})
			},
			hideModal() {
				bus.$emit('updateInputStatus', 'promptHide')
			},
			sendImage(type) {
				uni.chooseImage({
					count: 9,
					sourceType: [type],
					success: res => {
						res.tempFiles.forEach(item => {
							bus.$emit('updateContent', {
								type: 'image',
								payload: {
									url: item.path
								}
							})
						});
					}
				});
			},
			//发送视频
			sendVideo() {
				uni.chooseVideo({
					compressed: false,
					success: res => {
						bus.$emit('updateContent', {
							type: 'video',
							payload: {
								url: res.tempFilePath,
								width: res.width,
								height: res.height,
								duration: res.duration,
								size: res.size,
								name: res.name,
							}
						})
					}
				});
			},
			sendCall(type, mode) {
				bus.$emit('updateContent', {
					type: type,
					payload: {
						id: 'aaa',
						mode: mode,
						status: 1,
					}
				})
				bus.$emit('updateNavigate', '这里放一个url')
			},
			sendFile() {
				// 先加上一个插件,获取到文件数据后
				bus.$emit('updateContent', {
					type: 'file',
					payload: {
						name: '这是一个假的没有连接的文件1.xlsx',
						extension: 'xlsx',
						size: 323,
						unit: 'kB'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scrollView {
		height: 100%;

		.img-icon {
			width: 60rpx;
			height: 60rpx;
			margin: 15px 0 0 30rpx;
			display: inline-block;
			vertical-align: top;

			&:last-child {
				padding-bottom: 60px;
			}
		}

		.deleteEmojiClass {
			position: fixed;
			right: 20rpx;
			bottom: 10px;
			width: 100rpx;
			height: 40px;
			line-height: 40px;
			z-index: 99;
			background: #fff url("https://imgcache.qq.com/open/qcloud/tim/assets/emoji/emoji_13@2x.png") no-repeat center;
			background-size: 50rpx 50rpx;
		}

		.functions {
			padding: 35rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 170rpx;
				height: 78px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.item-icon {
					color: #646464;
					font-size: 28px;
				}

				.item-text {
					color: #aaaaaa;
					font-size: 11px;
				}
			}
		}
	}

	.bg-gray {
		background-color: #F8F8F8;
	}
</style>
